<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />    
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/api.js"></script></head>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>
    <header class="header header-f" style="padding-top:2rem; height:4rem;">
        <div class="header-l aui-pull-left" onclick="closeWin()">
            <i class="fa fa-angle-left"></i>
        </div>
        <div class="header-title">
            评价
        </div>
        <div class="header-r aui-pull-right">
        </div>
    </header>
    <div style="height:4rem;"></div>

    <div class="evaluate-title" id="list">

    </div>
    <div class="evaluate">
        <div class="evaluate-t">商品评价</div>
        <ul class="evaluate-m">
            <li id="1" onclick="changeChooseState('1');">很差</li> 
            <li id="2" onclick="changeChooseState('2');">一般</li> 
            <li id="3" onclick="changeChooseState('3');">满意</li> 
            <li id="4" onclick="changeChooseState('4');">非常满意</li> 
            <li id="5" onclick="changeChooseState('5');">无可挑剔</li> 
        </ul>
        <textarea name="" id="content" placeholder="请客观的发表您的评论,以便他人能够进行参考"></textarea>
        <div class="evaluate-d">
            <ul>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
                <li><img src="images/f1.jpg"></li>
            </ul>
            <div class="evaluate-d-d" onclick="choosePic();"></div>
        </div>
        <div class="evaluate-btn" onclick="handleCommit();">发表评价</div>
    </div>


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/template" id="template">
    <img src="{{=it.goods_image}}">
    <dl>
        <dt id="goods_name">{{=it.goods_name}}</dt>
        {{~it.goods_options:value:index}}
        <dd id="goods_options">
            {{=value.name}}: {{=value.value}}
        </dd>
        <!-- <p>购买时间:2018-12-13 20:20:43</p> -->
        {{~}}
    </dl>
</script>
<script type="text/javascript">

    apiready = function(){
        // 商品信息
        goods_info = api.pageParam.goods_info;
        // 商品id
        sub_id = goods_info.sub_id;
        templateFun(goods_info);
        $('#1').addClass('active');
        level = 1;
        images = new Array();
    }

    function changeChooseState(sort){
        $('li').removeClass('active');
        $('#'+sort).addClass('active');

        level = sort;
    }

    // 模板赋值函数
    function templateFun(data){
        if (data) {
          var template = $api.byId('template');
          var dotFn = doT.template(template.innerHTML);
          var html = dotFn(data);
          var list = $api.byId('list');
          $api.html(list, html);
      }
  }


    // 选择图片
    function choosePic(){

        var UIAlbumBrowser = api.require('UIAlbumBrowser');
        UIAlbumBrowser.open({
            max: 9,
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'bottom_left',
                    size: 20
                },
                nav: {
                    bg: 'rgba(0,0,0,0.6)',
                    titleColor: '#fff',
                    titleSize: 18,
                    cancelColor: '#fff',
                    cancelSize: 16,
                    finishColor: '#fff',
                    finishSize: 16
                }
            },
            rotation: true
        }, function(ret) {
            if (ret) {
                // alert(JSON.stringify(ret));
                if (ret.eventType == 'confirm') {
                    var imgArr = ret.list;
                    // for (var i = 0; i < imgArr.length; i++) {
                    //     images.push(imgArr[i].path);
                    // }
                    // uploadPic();


                    for (var i = 0; i < imgArr.length; i++) {

                        UIAlbumBrowser.transPath({
                            path: imgArr[i].path,
                        }, function(ret, err) {
                            if (ret) {
                                // alert(JSON.stringify(ret));
                                images.push(ret.path);
                                // alert(i);
                                if (images.length == imgArr.length) {
                                    alert(3)
                                    uploadPic();
                                }
                            } else {
                                alert(JSON.stringify(err));
                            }
                        });
                        if (i == imgArr.length - 1) {
                            alert(i)
                            uploadPic();
                        }
                    }
                    
                }
            }
        });
    }

    // 上传图片
    function uploadPic(){
        alert(2)
        alert(images);
        if (images == '') {
            alert(11)
            return false;
        }
        var userid = $api.getStorage('userid');
        var authtoken = $api.getStorage('authtoken');
        api.ajax({
            url: webAddress + '/a/member/Member/upload',
            method: 'POST',
            data: {
                files: {
                    file: images,
                },
            },
            headers: {
                TOKEN: token,
                authuid: userid,
                authtoken: authtoken,
                // 'Content-Type': 'application/x-www-form-urlencoded',
                'Content-Type': 'multipart/form-data',
            },
        },function(ret, err){
            if (ret) {
                alert( JSON.stringify( ret ) );
                var imgUrl = ret.result.file.url;
                // images.push(imgUrl);

                // var data = ret.result.data;
                // for (var i = 0; i < data.length; i++) {
                //     data[i].start_time = toDate(data[i].start_time);
                //     data[i].end_time = toDate(data[i].end_time);
                // }
                // templateFun(data);
            } else {
                // alert( JSON.stringify( err ) );
                api.toast({
                    msg: err.body.message,
                    duration: 2000,
                    location: 'bottom'
                });
                return false;
            }
        });
    }

    // 提交评价
    function handleCommit(){
        var content = $api.byId('content').value;
        // alert(content)
        var userid = $api.getStorage('userid');
        var authtoken = $api.getStorage('authtoken');

        api.ajax({
            url: webAddress + '/a/order/Comment/push',
            method: 'post',
            data: {
                values: {
                    id: sub_id,
                    level: level,
                    content: content,
                    images: images,
                },
            },
            headers: {
                TOKEN: token,
                authuid: userid,
                authtoken: authtoken,
                // 'Content-Type': 'application/x-www-form-urlencoded',
                // 'Content-Type': 'multipart/form-data',
            },
        },function(ret, err){
            if (ret) {
                alert( JSON.stringify( ret ) );
                // var data = ret.result.data;
                // for (var i = 0; i < data.length; i++) {
                //     data[i].start_time = toDate(data[i].start_time);
                //     data[i].end_time = toDate(data[i].end_time);
                // }
                // templateFun(data);
            } else {
                // alert( JSON.stringify( err ) );
                api.toast({
                    msg: err.body.message,
                    duration: 2000,
                    location: 'bottom'
                });
                return false;
            }
        });  
    }

    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>